import { Card, Form, Input, Button, Checkbox, message } from 'antd';
import logo from '../../assets/logo1.png';
import { useNavigate } from 'react-router-dom';
import './index.scss';
import { useStore } from '../../store';
function Login() {
  const { loginStore } = useStore();
  const navigate = useNavigate();
  
  async function onFinish(values) {
    console.log('Success:', values);
    const { mobile, code } = values;
    await loginStore.getToken({ mobile, code });
    // 跳转首页
    navigate('/', { replace: true });
    // 提示用户
    message.success('登录成功');
  }

  return (
    <div className="login">
      <Card className="login-container">
        <img className="login-logo" src={logo} alt=""></img>
        <Form
          validateTrigger={['onBlur', 'onChange']}
          initialValues={{
            remember: true,
            username: '13811111111',
            password: '246810',
          }}
          onFinish={onFinish}
        >
          <Form.Item
            label="用户名"
            name="username"
            rules={[
              {
                required: true,
                message: '请输入用户名',
                validateTrigger: 'onBlur',
              },
            ]}
          >
            <Input size="large" placeholder="请输入用户名" />
          </Form.Item>
          <Form.Item
            label="密 码"
            name="password"
            rules={[
              {
                required: true,
                message: '请输入密码',
              },
              {
                len: 6,
                message: '请输入6位密码',
                validateTrigger: 'onBlur',
              },
            ]}
          >
            <Input size="large" placeholder="请输入密码" />
          </Form.Item>
          <Form.Item name="remember" valuePropName="checked">
            <Checkbox className="login-checkbox-label">我已阅读并同意「用户协议」和「隐私条款」</Checkbox>
          </Form.Item>

          <Form.Item>
            {/* <!-- 渲染Button组件为submit按钮 --> */}
            <Button type="primary" htmlType="submit" size="large" block>
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}
export default Login;
